<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :rules="formRules"
      :inline="true"
    >
      <el-form-item label="监管企业" prop="customerName">
        <el-select
          v-model="queryParams.customerName"
          filterable
          placeholder="请选择监管企业"
          clearable
        >
          <el-option
            v-for="item in customerData"
            :key="item.customerId"
            :label="item.customerName"
            :value="item.customerName"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        > -->
      </el-form-item>
      <el-form-item
        ><div class="date">{{ systemDate }}</div></el-form-item
      >
      <el-form-item
        ><div class="warnMoney">
          预警金额(元)：
          <div class="wmoneyColor">{{ warnM }}</div>
        </div></el-form-item
      >
    </el-form>
    <div v-loading="loading">
      <div class="realTimeinventory">
        <div class="title"><i class="el-icon-s-grid"></i>实时库存情况</div>
        <div class="realTimeItem1 normalbox normalBg">
          <div class="realTimeItemleft">正常</div>
          <div class="realTimeItemright">
            <div class="normal">
              <div class="normaItem">
                <span>当日入库件数</span
                ><span class="inventoryValue">{{ rkjs }}</span>
              </div>
              <div class="normaItem">
                <span>当日出库件数</span
                ><span class="inventoryValue">{{ ckjs }}</span>
              </div>
            </div>
            <div class="normal">
              <div class="normaItem">
                <span>当日入库金额</span
                ><span class="inventoryValue">{{ rkje }}</span>
              </div>
              <div class="normaItem">
                <span>当日出库金额</span
                ><span class="inventoryValue">{{ ckje }}</span>
              </div>
            </div>
            <div class="normal">
              <div class="normaItem rowlayout">
                <span>库存件数</span
                ><span class="inventoryValue">{{ kcje }}</span>
              </div>
            </div>
            <div class="normal">
              <div class="normaItem rowlayout">
                <span>库存金额</span
                ><span class="inventoryValue">{{ kcjs }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="realTimeItem1 abnormalbox abnormalBg">
          <div class="realTimeItemleft">非正常</div>
          <div class="realTimeItemright">
            <div class="normal">
              <div class="normaItem">
                <span>不合格库存件数</span
                ><span class="inventoryValue">{{ nhgjs }}</span>
              </div>
              <div class="normaItem">
                <span>不合格库存金额</span
                ><span class="inventoryValue">{{ nhgje }}</span>
              </div>
            </div>
            <div class="normal">
              <div class="normaItem">
                <span>停售件数</span
                ><span class="inventoryValue">{{ tsjs }}</span>
              </div>
              <div class="normaItem">
                <span>停售金额</span
                ><span class="inventoryValue">{{ tsje }}</span>
              </div>
            </div>
            <div class="normal">
              <div class="normaItem">
                <span>折扣库件数</span
                ><span class="inventoryValue">{{ zkkjs }}</span>
              </div>
              <div class="normaItem">
                <span>折扣库金额</span
                ><span class="inventoryValue">{{ zkkje }}</span>
              </div>
            </div>
            <div class="normal">
              <div class="normaItem rowlayout">
                <span>总金额</span
                ><span class="inventoryValue">{{ totalMoney }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="historyinventory">
        <div class="historyData">
          <div class="title">
            <i class="el-icon-s-data"></i>历史七天库存情况
          </div>
          <div>
            <el-switch
              style="display: block"
              v-model="historyDay"
              active-color="#ff4949"
              inactive-color="#13ce66"
              active-text="件数"
              inactive-text="金额"
              active-value="0"
              inactive-value="1"
              @change="handlestatus"
            >
            </el-switch>
          </div>
        </div>
        <div class="reportForm">
          <div class="echart" id="mychart" :style="myChartStyle"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { customerList } from "@/api/system/money";
import {
  customerDatalist,
  lineList,
  historyList,
  warnMoneylist,
} from "@/api/system/inventory";
export default {
  data() {
    return {
      warnM: "",
      systemDate: null,
      xData: [], //横坐标
      yData: [], //人数数据
      taskDate: [],
      myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
      addTime: [],
      queryParams: {
        customerName: null,
      },
      formRules: {
        customerName: [
          { required: true, message: "请输入监管企业", trigger: "blur" },
        ],
      },
      customerData: [],
      // 正常
      normalList: [],
      // 入库件数
      rkjs: "",
      // 出库件数
      ckjs: "",
      // 入库金额
      rkje: "",
      // 出库金额
      ckje: "",
      // 库存件数
      kcjs: "",
      // 库存金额
      kcje: "",
      // 非正常
      abnormalList: [],
      nhgjs: "",
      nhgje: "",
      tsjs: "",
      tsje: "",
      zkkjs: "",
      zkkje: "",
      totalMoney: "",
      loading: false,
      // 七天历史
      historyDay: "",
    };
  },
  created() {
    const now = new Date();
    const year = now.getFullYear(); // 获取当前年份
    const month = now.getMonth() + 1; // 月份是从 0 开始计数的，需要加 1
    const day = now.getDate(); // 获取当前日期
    this.systemDate = `${year}年${month}月${day}日`;
    this.customlist();
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    addDecimals(...nums) {
      const precision = 1000000; // 保留六位小数
      const sum = nums.reduce(
        (acc, num) => acc + Math.round(num * precision),
        0
      );
      return sum / precision;
    },
    handlestatus() {
      console.log(123, this.historyDay);
      if (this.historyDay == "0") {
        historyList(this.queryParams).then((res) => {
          if (Array.isArray(res.data) && res.data.length > 0) {
            let historyList = res.data;
            this.xData = historyList.map((item) => item.rq);
            this.yData = historyList.map((item) => item.zcjs);
            this.taskDate = historyList.map((item) => item.bzcjs);
            this.initEcharts();
          } else {
            this.xData = [];
            this.yData = [];
            this.taskDate = [];
            this.initEcharts();
          }
        });
      } else {
        historyList(this.queryParams).then((res) => {
          if (Array.isArray(res.data) && res.data.length > 0) {
            let historyList = res.data;
            this.xData = historyList.map((item) => item.rq);
            this.yData = historyList.map((item) => item.zcje);
            this.taskDate = historyList.map((item) => item.bzcje);
            this.initEcharts();
          } else {
            this.xData = [];
            this.yData = [];
            this.taskDate = [];
            this.initEcharts();
          }
        });
      }
    },
    handleQuery() {
      this.$refs["queryForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          warnMoneylist(this.queryParams).then((res) => {
            if (res.data) {
              this.warnM = res.data.kcjeFmt;
            }
          }),
            customerDatalist(this.queryParams).then((res) => {
              if (res.data) {
                this.rkjs = res.data.rkjs;
                this.ckjs = res.data.ckjs;
                this.rkje = res.data.rkje;
                this.ckje = res.data.ckje;
                this.kcjs = res.data.kcjs;
                this.kcje = res.data.kcje;
                this.loading = false;
              } else {
                this.loading = false;
              }
            });
          lineList(this.queryParams).then((res) => {
            if (Array.isArray(res.data) && res.data.length > 0) {
              this.nhgjs = res.data[0].nhgjs;
              this.nhgje = res.data[0].nhgje;
              this.tsjs = res.data[0].tsjs;
              this.tsje = res.data[0].tsje;
              this.zkkjs = res.data[0].zkkjs;
              this.zkkje = res.data[0].zkkje;
              // this.totalMoney = this.nhgje + this.tsje + this.zkkje;
              this.totalMoney = this.addDecimals(
                this.nhgje,
                this.tsje,
                this.zkkje
              );
            } else {
              this.nhgjs = 0;
              this.nhgje = 0;
              this.tsjs = 0;
              this.tsje = 0;
              this.zkkjs = 0;
              this.zkkje = 0;
              this.totalMoney = 0;
            }
          });
          historyList(this.queryParams).then((res) => {
            if (Array.isArray(res.data) && res.data.length > 0) {
              let historyList = res.data;
              this.xData = historyList.map((item) => item.rq);
              this.yData = historyList.map((item) => item.zcje);
              this.taskDate = historyList.map((item) => item.bzcje);
              this.initEcharts();
            } else {
              this.xData = [];
              this.yData = [];
              this.taskDate = [];
              this.initEcharts();
            }
          });
        }
      });
    },
    resetQuery() {},
    // 监管企业
    customlist() {
      customerList().then((res) => {
        this.customerData = res.data;
      });
    },
    initEcharts() {
      // 多列柱状图
      const mulColumnZZTData = {
        xAxis: {
          data: this.xData,
          axisLabel: {
            textStyle: {
              color: "#333333", //坐标值的具体的颜色
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        // 图例
        legend: {
          data: ["正常库存", "非正常库存"],
          top: "0%",
        },
        yAxis: {
          axisLabel: {
            textStyle: {
              color: "#333333", //坐标值得具体的颜色
            },
          },
        },
        series: [
          {
            type: "bar", //形状为柱状图
            itemStyle: {
              color: "#6ddc6d",
            },
            data: this.yData,
            name: "正常库存", //legend属性
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "top",
            },
          },
          {
            type: "bar", //形状为柱状图
            itemStyle: {
              color: "#f28259",
            },
            data: this.taskDate,
            name: "非正常库存", //legend属性
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "top",
            },
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  color: #fff;
  .title {
    font-weight: 700;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
  }
  .realTimeinventory {
    color: #333333;
    background: #f0f0f0;
    margin: -5px 0 0 0;
    height: 300px;
    width: 1600px;
    font-size: 14px;
    padding: 0 10px;
    // overflow: auto;
    border-top-left-radius: 10px; /* 左上角圆角半径为 10px */
    border-top-right-radius: 10px; /* 左下角圆角半径为 10px */
    // border-bottom: 1px solid #e2e2e2;
    // .title {
    //   font-weight: 700;
    //   font-size: 14px;
    //   height: 50px;
    //   line-height: 50px;
    // }
    .normalBg {
      background: #6ddc6d;
    }
    .abnormalBg {
      background: #dcd16d;
    }
    .normalbox {
      margin-bottom: 0 !important;
      border-bottom: 0 !important;
    }
    .abnormalbox {
      margin-top: 0 !important;
    }
    .realTimeItem1 {
      margin: 10px 20px;
      height: 100px;
      display: flex;
      justify-content: flex-start;
      border: 1px solid #c1d5fa;
      .realTimeItemleft {
        width: 300px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 16px;
        border-right: 1px solid #c1d5fa;
      }
      .realTimeItemright {
        width: 1300px;
        height: 100px;
        display: flex;
        justify-content: space-evenly;
        .normal {
          width: 335px;
          height: 100px;
          padding: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          border-right: 1px solid #c1d5fa;
          // border-left: 1px solid #818181;
          .normaItem {
            height: 50%;
            display: flex;
            align-items: center;
            span {
              margin-right: 10px;
              width: 100px;
            }
            .inventoryValue {
              font-size: 16px;
              // color: #ac890b;
              color: #ffffff;
            }
          }
          .rowlayout {
            height: 100%;
          }
        }
      }
    }
  }
  .historyinventory {
    border-bottom-left-radius: 10px; /* 左上角圆角半径为 10px */
    border-bottom-right-radius: 10px; /* 左下角圆角半径为 10px */
    background: #f0f0f0;
    color: #333333;
    margin: 10px 0;
    height: 450px;
    width: 1600px;
    padding: 0 10px;
    // border-bottom: 1px solid #e2e2e2;
    // .title {
    //   font-weight: 700;
    //   font-size: 14px;
    //   height: 50px;
    //   line-height: 50px;
    // }
    .historyData {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .el-icon-s-grid:before {
    color: #6ddc6d;
    margin-right: 4px;
  }
  .el-icon-s-data:before {
    color: #6ddc6d;
    margin-right: 4px;
  }
  .date {
    color: #333333;
    width: 400px;
    font-size: 18px;
    text-align: center;
    margin-left: 70%;
  }
  .warnMoney {
    color: #333333;
    width: 400px;
    text-align: center;
    margin-left: 100%;
    font-size: 18px;
    .wmoneyColor {
      display: inline-block;
      color: #fa5050;
      font-size: 20px;
    }
  }
}
</style>